<template>
  <div>
    <!-- 材料 -->
    <div style="background: #fff;" v-if="Material.length != 0">
      <div class="material-box Mian padlr320">
        <div class="material-content">
          <div class="material-left">
            <div class="material-title">所需材料</div>
            <div class="material-content-box">
              <p v-html="Material[0].content"></p>
              <!-- <ul>
                <li>
                  <span class="material-title-name">主体贤格证明</span>
                  <span class="material-title-content">《个人》身份证复印件/《企业、个体工商户》营业执朋复印件</span>
                </li>
                <li>
                  <span class="material-title-name">诉讼相关资科</span>
                  <span class="material-title-content">专利证+侵权或报诉慢权证据材料+起诉状或客辩状等其也资料《平台准备》</span>
                </li>
                <li>
                  <span class="material-title-name">摄权受托资科</span>
                  <span class="material-title-content">每署约代理受托书《平台准备》</span>
                </li>
              </ul> -->
            </div>
          </div>
          <div>
            <el-image style="width: 250px; height: 250px" :src="getAssetsImages('block-icon2')"></el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from "vue";
import serviceApi from "@/api/modules/lawyer.js"
const Material = ref([])
const getServiceMaterial = async () => {
  let service_id = 3
  let res = await serviceApi.getServiceMaterial(service_id)
  if (res.code === 1) {
    const myArray = Object.values(res.data);
    Material.value = myArray
    // console.log(myArray[0].content);
    // platformList.push(...myArray)
  }
  // console.log(res);
}
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
onMounted(() => {
  getServiceMaterial()
})
</script>

<style lang="scss" scoped>
.Mian {
  width: 1920px !important;
  margin: 0 auto;
  // height: 100%;
}

.material-box {
  .material-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .material-left {
      flex: 1;
    }

    .material-title {
      // width: 802px;
      height: 50px;
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      text-align: center;
      color: #202020;
      line-height: 50px;
      margin: 0 0 20px 260px;
      display: flex;
      justify-content: center;
      align-items: center
    }
  }

  .material-content-box {
    li {
      margin: 0px 0 20px 0;

      .material-title-name {
        width: 64px;
        height: 24px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: bold;
        text-align: center;
        color: #000000;
        line-height: 24px;
        margin-right: 15px
      }

      .material-title-content {
        // width: 64px;
        height: 24px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #7c7c7f;
        line-height: 24px;
      }
    }
  }

  ul li::marker {
    color: #0052d9;
  }

  ul {
    // flex: 1;
    // flex: 1;

    li {
      list-style: disc;
      list-style-color: #0052d9;
      // list-style-type: circle;
      list-style-position: inside;
    }
  }
}
</style>
